#content.rel-editor #tracklist td {vertical-align: top;}
#content.rel-editor #tracklist td.midcol {vertical-align: middle; font-size: @small-text;}
#content.rel-editor #tracklist input[type="checkbox"] {vertical-align: middle;}
#content.rel-editor #batch-tools {
    width: 100%;
    margin: 0.8em;
    /*
     * Center the tooltips so that they're less likely to clip
     * outside the viewport.
     */
    .tooltip-container { left: 50%; }
}
#content.rel-editor div.ars {padding: 0; margin: 0.5em 0; margin-left: 1.5em;}
#content.rel-editor #release-rels {margin-top: 1em;}

fieldset#relationship-editor .relationship-editor-fieldset-content {
    padding: @form-margin;
}

.rel-add { background: @positive-bg; }
.rel-edit { background: @rel-edit; }
.rel-remove { background: @negative-bg; }

#content.rel-editor .btn {
    cursor: pointer;
    vertical-align: top;
    color: @link-default;
    white-space: nowrap;
    text-decoration: none;
}
#content.rel-editor .add-rel {
    display: inline-block;
    margin-left: 1.5em;
    padding-bottom: 0.5em;
}
#content.rel-editor .btn.disabled {cursor: default; color: @button-text;}

#content.rel-editor .warning,
div.relationship-dialog .warning {
    border: 2px red dotted;
    background: @negative-light-bg;
    padding: 0.5em;
    font-weight: bold;
}
#content.rel-editor .error-field {border-bottom: 2px red dotted;}

div.relationship-dialog, div.work-dialog {
    width: 500px;
    fieldset {
        margin: 0px;
        legend {
            font-size: @medium-text;
            margin-bottom: 6px;
        }
        table.details th {
            width: auto;
        }
        > p {
            margin: 0px;
        }
    }
    table.relationship-details, table.work-details {
        width: 100%;
        td.section {
            vertical-align: top;
            text-align: right;
            width: 25%;
            padding-right: 0.75em;
            &.required {font-weight: bold;}
        }
        td.fields {
            width: 320px;
        }
        div.autocomplete2 { width: 100%; }
    }
}

div.relationship-dialog {
    div.dialog-titlebar {
        display: inline-block;
        width: 100%;

        h1 {
            float: left;
        }

        .buttons-right {
            float: right;
            text-align: right;
        }
    }

    h2 {
        text-align: center;
        font-size: @medium-text;
        margin: 0.5em 0;
        position: relative;

        .heading-text {
            background-color: @text-white;
            padding: 0 1em;
        }

        .heading-line {
            border-top: 1px @medium-grey solid;
            position: relative;
            top: 0.75em;
            z-index: -1;
        }
    }

    p { margin: 0.5em 0; }

    table.relationship-details {
        select.entity-type, input.entity-credit { min-width: 60%; }
        td.fields.end-date div.row {
            /*
             * Remove bottom margin below the ended checkbox, since the
             * "Preview" h2 below already has sufficient margin/padding.
             */
            margin-bottom: 0;
        }
    }
    table.preview.details th {
        width: unset;
    }
    input.attribute-credit {
        width: 130px;
    }
    label.change-credits-checkbox {
        display: flex;
        padding-top: 6px;
        input[type="checkbox"] { margin-top: 1px; }
    }
    div.change-credits-radio-options {
        margin-top: 8px;
        label { display: block; }
    }
    button.change-direction {
        float: right;
    }
    input[type="checkbox"] {
        vertical-align: middle;
    }
    p.required-fields-note::before { .asterisk(); }
    div.buttons {
        width: 100%;
    }
}

div.multiselect-value {
    display: flex;
    align-items: center;
}

div.attribute-container {
    button.add-item {
        margin-top: 6px;
    }
}

div.ar-descr {
    width: 95%;
}

#relationship-editor, div.release-relationship-editor {
    margin-top: 1em;

    legend button.add-item {
        margin-left: 0;
    }

    table.rel-editor-table {
        width: 100%;

        > tbody > tr {
            button.icon {
                box-sizing: content-box;
                padding: 0px 2px;
                @media (pointer: coarse) {
                    padding: 2px 4px;
                    margin: 0px 2px;
                    height: 20px;
                    background-size: 20px;
                }
            }
            > th {
                text-align: right;
                min-width: 160px;
                vertical-align: top;

                &.link-phrase {
                    display: flex;
                    > label { flex-grow: 1; }
                    > button.add-another-entity { background-position-x: right; }
                }
            }
            > td.add-relationship {
                text-align: right;
                width: 160px;
                @media (pointer: coarse) {
                    button.add-relationship {
                        height: 20px;
                        background-size: 20px;
                        padding-right: 24px;
                    }
                }
            }
            > td.relationship-list {
                width: 100%;
                div.relationship-item {
                    display: flex;
                    > button.icon { background-position-x: center; }
                    > span { margin-left: 4px; }
                }
            }
        }
    }

    .no-value {
        color: @dark-grey;
        border-bottom: 1px @dark-grey dotted;
    }
}

div.release-relationship-editor {
    td.recording, td.works {
        width: 50%;
    }
}
